<template>
  <el-card
    shadow="never"
    :body-style="{
      border: 0,
      'padding': padding+'px',
      'padding-bottom': pb + 'px',
      'background-color': sideTheme === 'theme-dark' ? variables.menuBodyBgc : variables.menuLightBodyBgc,
      'color': sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor
      }"
    class="box-card"
  >
    <slot></slot>
  </el-card>
</template>

<script>
import variables from "@/assets/styles/variables.scss";
export default {
  props: {
    pb: {
      type: Number | String,
      default: 15,
    },
    padding: {
      type: Number | String,
      default: 15,
    },
  },
  computed: {
    sideTheme() {
      return this.$store.state.settings.sideTheme;
    },
    variables() {
      return variables;
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  border: 0;
}
.box-card {
  margin: 15px;
  margin-top: 0;
  ::v-deep .el-form--inline {
    .el-form-item {
      margin-bottom: 10px !important;
    }
  }
}
</style>
